<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>晒宝</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>



    <style>
        .bd-0 {
            display: none;
        }

        .active {
            display: block;
        }
        .liss{
            overflow: hidden;
        }
        .liss-img{
            float: left;

        }
        .Sunbird .bd-1 ul li {
        		height:2.5rem;
        		margin-bottom:0.1rem;
        }
        .Sunbird .bd-1 ul li img{
        		height:2.5rem;
        }
    </style>
</head>

<body>
    <!--头部-->
    <div class="public-header flex">
        <!--<span class="public-header-left-search"></span>-->
        <span class="public-header-left-back"></span>
        <span class="public-header-center">晒宝</span>
        <span class="public-header-right" onclick='javascript:window.location.href="../page/publishment.html"'>新建</span>
    </div>

    <!--正文-->
    <div class="Sunbird bc-gray">
        <div class="hd flex">
            <a href="javascript:;" class="active">用户晒图</a>
            <a href="javascript:;" @click='refresh_data()'>我的晒图</a>
            <!--<a href="javascript:;" @click='refresh_tous'>投诉列表</a>-->
        </div>
        <div class="bd">
            <div class="bd-1 bd-0 active">
                <ul>
                    <div v-if="all_info.length == 0" style="text-align: center;margin-top: 100px;">
                        暂无数据
                    </div>
                    <div v-else>
                        <li onclick="" v-for='item in all_info'>
                            <img :src="item.user_up_image.split(',')[0]" alt="" @click='join_info(this)'>
                            <div class="block">
                                <p class="p">{{item.discribe}}</p>
                                <div class="icon flex">
                                    <div class="right">{{item.user_rel_Name}}</div>
                                    <div class="left">
                                        <span>{{item.reading_quantity}}</span>
                                        <em @click='add_good(this)'>{{item.good_num}}</em>
                                    </div>

                                </div>
                            </div>
                        </li>
                    </div>
                </ul>
            </div>
            <div class="bd-2 bd-0">
                <ul>
                    <div v-if="user_info.length == 0" style="text-align: center;margin-top: 100px;">
                        暂无数据
                    </div>
                    <div v-else>
                        <li v-for='item in user_info'>
                            <img :src="item.user_up_image.split(',')[0]" alt="" @click='join_info(this)'>
                            <div class="block">
                                <p class="p">{{item.discribe}}</p>
                                <div class="icon flex">
                                    <div class="left">
                                        <span>{{item.reading_quantity}}</span>
                                        <em @click='add_good(this)'>{{item.good_num}}</em>
                                    </div>
                                    <div class="right" @click='delete(this,$index)'>删除</div>
                                </div>
                            </div>
                        </li>
                    </div>
                </ul>
                <!-- <h4>草稿箱</h4>
                <ul>
                    <li>
                        <img src="../img/配图@2x 2.png" alt="">
                        <div class="block">
                            <p class="p">内容内容内容内容内容内容内容内容内容内容...</p>
                            <div class="icon flex">
                                <div class="left">
                                    <span>123</span>
                                    <em>123</em>
                                </div>
                                <div class="right">编辑</div>
                            </div>
                        </div>
                        <div class="box flex">
                            <span>有效</span>
                            <span>无效</span>
                            <span>修改</span>
                            <span>删除</span>
                        </div>
                    </li>
                </ul> -->
            </div>
            <!--<div class="bd-3 bd-0">-->
                <!--<ul>s-->
                    <!--<li class="liss">-->
                        <!--<img src="" alt="">-->
                        <!--<div>-->

                        <!--</div>-->
                    <!--</li>-->
                <!--</ul>-->
            <!--</div>-->
        </div>




    </div>

    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>

    <script>
        $(function () {
            $('.hd a').click(function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.bd-0').eq(index).addClass('active').siblings().removeClass('active');
            })



        })
    </script>

    <script>
        $(function () {
            new Vue({
                el: 'body',
                data: {
                    all_info: [],
                    user_info: [],
                    uid:''
                },
                ready: function () {
                    var _self = this;
                    _self.uid = sessionStorage.getItem("uid");
                    this.$http.get(base_url + 'ZITAOHUI/sharebio').then(
                        function (response) {
                            console.log(response);
                            let all_data = response.data.extend.list;
                            console.log(all_data);
                            this.$set('all_info', all_data);

                        },
                        function () {

                        })
                },
                methods: {
                    refresh_data: function () {
                        var _self = this;
                        this.$http.get(base_url + 'ZITAOHUI/sharebio', {
                            params: {
                                userId: _self.uid
                            }
                        }).then(
                            function (response) {
                                console.log(response);
                                let all_data = response.data.extend.list;
                                console.log(all_data);
                                if(all_data.length == 0){
//                                    alert("您暂未有晒图");
                                }else{
                                    this.$set('user_info', all_data);

                                }

                            },
                            function () {

                            })
                    },
                    join_info: function (t) {
                        console.log(t)
                        window.location.href = '../page/Sunbird-details-page.html?sharBioid=' + t.item
                            .id;
                    },
                    add_good: function (t) {
                        console.log(t);

                        $.ajax({
                            url: base_url + 'ZITAOHUI/increaseShareBioGoodsNum',
                            data: {
                                sharBioid: t.item.id,
                                user_id: sessionStorage.getItem("uid")
                                    },
                            success: function (data) {
                                console.log(data)
                                if (data.extend.list.msg == '点赞成功') {
                                    t.item.good_num += 1;
                                } else {
                                    alert(data.extend.list.msg)
                                }

                            }
                        })
                    },
                    delete: function (t, idx) {
                        console.log(t)
                        this.user_info.splice(idx, 1);
                        $.ajax({
                            url: base_url + 'ZITAOHUI/deleteShareBio',
                            data: {
                                sharBioid: t.item.id
                            },
                            success: function (data) {
                                console.log(data)

                           


                            }
                        })

                    }
                }
            })
        })
    </script>
</body>

</html>